<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box">这是一个元素</div>
    <script type="text/javascript">
        var box=document.getElementById("box");
        box.onmouseover=function(){
            console.log("鼠标滑进去了");
        };
        box.onmouseout=function(){
            console.log("鼠标滑出来了");
        };
        box.onclick=function(){
          console.log("鼠标点击了");
        };
        box.onmousedown=function(){
            console.log("鼠标摁下去了");
        };
        box.onmouseup=function(){
            console.log("鼠标抬起来了");
        };
        box.onmousemove=function(){
            console.log("鼠标移动了");
        };
    </script>

</body>
</html>